<template>
  <div class="transactionHis-root">
    <van-nav-bar
      fixed
      title="交易记录"
      left-arrow
      z-index="999"
      @click-left="$router.goBack()"
    >
      <template #right>
        <img
          style="width: .42rem; height: .42rem; z-index=1"
          src="../../assets/images/transactionHis/1.png"
          alt=""
          @click="show = !show"
        />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="2"
      >
        <div class="card" v-for="(item, index) in lists" :key="index">
          <div class="icon-box">
            <img
              v-if="item.type === 2"
              src="../../assets/images/transactionHis/3.png"
              alt=""
            />
            <img
              v-if="item.type === 1"
              src="../../assets/images/transactionHis/2.png"
              alt=""
            />
          </div>

          <div class="info-box">
            <div class="title-box flex">
              <div v-if="item.type === 2" class="sell-type">卖出</div>
              <div v-if="item.type === 1" class="buy-type">买入</div>
              <div class="title">{{ item.coin_name }}/USDT</div>
              <div class="state">HUOBI</div>
            </div>

            <div class="time">时间：{{ item.create_time }}</div>

            <div class="line"></div>

            <div class="row">
              <div class="name">订单编号：</div>
              <div class="num">{{ item.order_id }}</div>
            </div>

            <div class="row">
              <div class="name">
                {{ item.type === 2 ? "卖出" : "买入" }}数量：
              </div>
              <div class="num">{{ item.field_quantity }}</div>
            </div>

            <div class="row">
              <div class="name">
                {{ item.type === 2 ? "卖出" : "买入" }}费用：
              </div>
              <div class="num">{{ item.field_amount }}</div>
            </div>

            <div class="row">
              <div class="name">
                {{ item.type === 2 ? "卖出" : "买入" }}均价：
              </div>
              <div class="num">{{ item.field_price }}</div>
            </div>

            <div class="row">
              <div class="name">补仓次数：</div>
              <div class="num" v-if="item.cover_times>=0">{{item.cover_times}}</div>
            </div>

            <div class="row">
              <div class="name">手续费：</div>
              <div class="num" v-if="item.type === 2">
                {{ item.field_fees }} &nbsp;&nbsp; USDT
              </div>
              <div class="num" v-if="item.type === 1">
                {{ item.field_fees }} &nbsp;&nbsp; {{ item.coin_name }}
              </div>
            </div>

            <div class="row">
              <div class="name">盈利：</div>
              <div class="num" v-if="item.type === 2">{{ item.profit }}</div>
              <div class="num" v-if="item.type === 1">0</div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- 弹框 -->
    <van-popup position="top" style="margin-top: .88rem" v-model="show">
      <div class="pop-box">
        <div class="row">
          <div class="title">订单状态</div>
          <div class="btn-box flex">
            <div
              class="btn"
              :class="formData.type == 0 ? 'change' : ''"
              @click="formData.type = 0"
            >
              全部
            </div>
            <div
              class="btn"
              :class="formData.type == 1 ? 'change' : ''"
              @click="formData.type = 1"
            >
              买入
            </div>
            <div
              class="btn"
              :class="formData.type == 2 ? 'change' : ''"
              @click="formData.type = 2"
            >
              卖出
            </div>
          </div>
        </div>

        <div class="row">
          <div class="title">交易所</div>
          <div class="btn-box flex">
            <div
              class="btn"
              :class="formData.exchange == 1 ? 'change' : ''"
              @click="formData.exchange = 1"
            >
              HUOBI
            </div>
          </div>
        </div>

        <div class="row">
          <div class="title">交易币对查询</div>
          <div class="btn-box flex">
            <div class="btn">
              <van-field v-model="formData.value" />
            </div>
          </div>
          <div class="tips">如：查询BTC/USDT,请填写.</div>
        </div>

        <div class="row">
          <div class="title">时间</div>
          <div class="time-box flex" @click="showDate = true">
            <div class="time flex-center">{{ formData.date[0] }}</div>
            <div class="text">至</div>
            <div class="time flex-center">{{ formData.date[1] }}</div>
          </div>
        </div>
      </div>

      <div class="enter-box">
        <div class="btn" @click="reset()">重置</div>
        <div class="btn" @click="enter()">确认</div>
      </div>
    </van-popup>

    <!-- 时间弹框 -->
    <van-calendar
      color="#2d7afe"
      :min-date="new Date(2010, 0, 1)"
      v-model="showDate"
      type="range"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import mixin from "@/mixin.js";
import { TRADE_LOG } from "@/api/api.js";
import { Toast } from "vant";
import { formatDate } from "@/util/util";
export default {
  data() {
    return {
      lists: [],
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      showDate: false,
      date: [],
      formData: {
        type: 0,
        exchange: 1,
        date: [],
      },
      page: 1,
      rule_id: 0,
    };
  },
  components: {},
  // watch: {
  //   "$route.query.rule_id"(n) {
  //     if (n) {
  //       this.rule_id(n);
  //     }
  //   },
  // },
  methods: {
    async LoadList() {
      // console.log("LoadList");
      this.loading = true;
      const { data } = await this.$reqGet(TRADE_LOG, {
        page: this.page,
        rule_id: this.$route.query.rule_id || this.rule_id,
        start_time: this.formData.date[0],
        end_time: this.formData.date[1],
        type: this.formData.type,
      });
      // console.log(data.data.list);
      if (data.status == 1 && data.data.list.length > 0) {
        let list = data.data.list;
        this.formData.value = data.data.list[0].coin_name;
        this.lists = this.lists.concat(list);
        this.loading = false;
        this.page++;
      } else {
        // console.log("没有了");
        this.finished = true;
      }
    },
    onLoad() {
      this.loading = false;
      this.LoadList();
    },
    onRefresh() {
      this.page = 1;
      this.lists = [];

      this.formData.date = [];
      this.formData.type = 0;
      // 清空列表数据
      this.refreshing = false;
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onConfirm(date) {
      const [start, end] = date;
      this.showDate = false;
      this.formData.date = [formatDate(start), formatDate(end)];
    },
    // 确认筛选数据
    enter() {
      // console.log(this.formData);
      this.page = 1;
      this.lists = [];
      this.onLoad();
      this.show = false;
    },
    reset() {
      this.formData = {
        type: 0,
        exchange: 0,
        date: [],
      };
    },
  },
  watch: {
    "$route.query.rule_id"(n) {
      if (n) {
        // console.log(n);
        // let rule_id = this.$route.query.rule_id;
        // console.log(this.$route.query.rule_id);
        //this.lists = [];
        this.rule_id = n;
        this.onRefresh();
        //this.onLoad()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.transactionHis-root {
  min-height: 100%;
  background: #f5f5f5;
  color: #141414;
  font-size: 0.2rem;

  .card {
    margin: 0.3rem 0.3rem 0rem;
    background-color: #fff;
    padding: 0.3rem 0.37rem 0.44rem 0.48rem;
    display: flex;
    align-items: flex-start;
    border-radius: 0.1rem;

    &:nth-child(1) {
      margin-top: 1.1rem;
    }

    .icon-box {
      margin-right: 0.24rem;
      img {
        width: 0.64rem;
        height: 0.64rem;
      }
    }

    .info-box {
      width: 100%;

      .title-box {
        position: relative;
        width: 100%;
        margin-bottom: 0.17rem;

        .buy-type {
          color: #49c3ae;
          margin-right: 0.34rem;
          font-size: 0.26rem;
        }
        .sell-type {
          color: #c34949;
          margin-right: 0.34rem;
          font-size: 0.26rem;
        }

        .title {
          font-size: 0.26rem;
        }

        .state {
          position: absolute;
          color: #49c3ae;
          right: 0.3rem;
          font-size: 0.26rem;
        }
      }

      .time {
        text-align: left;
      }

      .line {
        margin: 0.24rem 0;
        width: 5.54rem;
        height: 0.03rem;
        background-color: #f0eeee;
      }

      .row {
        display: flex;
        align-items: center;
        margin-bottom: 0.15rem;

        &:last-child {
          margin-bottom: 0;
        }
        .name {
          color: #919191;
          width: 1.3rem;
          text-align: left;
        }
      }
    }
  }

  .pop-box {
    background-color: #fff;
    padding: 0.3rem;

    .row {
      margin-bottom: 0.6rem;
      .title {
        text-align: left;
        color: #919191;
        margin-bottom: 0.24rem;
      }

      .btn-box {
        .btn {
          width: 1.3rem;
          height: 0.46rem;
          line-height: 0.46rem;
          margin-right: 0.7rem;
          text-align: center;
          background-color: #eeeeee;
          color: #4f4f4f;
          border-radius: 0.1rem;
        }
      }

      .tips {
        margin-top: 0.22rem;
        text-align: left;
        font-size: 0.2rem;
        color: #919191;
      }

      .time-box {
        .time {
          width: 2.16rem;
          height: 0.48rem;
          background-color: #eee;
          margin-right: 0.3rem;

          &:nth-child(3) {
            margin-left: 0.3rem;
          }
        }

        .text {
          color: #919191;
        }
      }
    }
  }
  .change {
    background-color: #2d7afe !important;
    color: #fff !important;
  }

  .enter-box {
    display: flex;
    .btn {
      flex: 1;
      height: 0.77rem;
      line-height: 0.77rem;
      font-size: 0.24rem;

      &:nth-child(1) {
        background-color: #eee;
      }

      &:nth-child(2) {
        background-color: #2d7afe;
        color: #fff;
      }
    }
  }
}
</style>
